<script setup lang="ts">
import { Auth2FA, MyEmail, Password } from './components/auth';
import Settings from './components/Settings.vue';

const { setEle, eleBp } = useElementBreakpoint();

const userStore = useUserStore();
const appStore = useAppStore();
const { userInfo } = storeToRefs(userStore);

const percentage = computed(() => {
  if ((!userInfo.value?.play_amount) && (!userInfo.value?.next_level?.total_wager))
    return;

  const number = bignumber(userInfo.value?.play_amount ?? 0).dividedBy(bignumber(userInfo.value?.next_level?.total_wager ?? 0)).multipliedBy(100).toNumber();
  return number < 100 ? number.toFixed(2) : 100;
});
userStore.userInfoQry.refetch();
</script>

<template>
  <div :ref="setEle" :class="clsx(eleBp.lt3xl && 'query')" class="account grid grid-rows-[minmax(101px,1fr)_235px_minmax(330px,auto)] grid-cols-3 gap-4 lt-tabletl:(grid-cols-1)">
    <TCard class="user" bodyClass="flex">
      <div class="flex cursor-pointer items-center gap-4" @click="globalPopups.userModify.open()">
        <img :src="appStore.getCdnResPath('avatar', userInfo?.avatar)" class="h-14.5 w-14.5 rounded-[50%]">
        <div>
          <span class="base-title"> {{ userInfo?.nickname }}</span>
          <br>
          <a class="text-sm"> {{ $t('xp0UrsknjTuG_6Sy5p2K') }} </a>
        </div>
      </div>
    </TCard>
    <TCard class="grade relative" bodyClass="flex items-center gap-4">
      <div class="w-16">
        <img :src="appStore.joinCdnPath(`${userInfo?.vip_level?.level_icon}`)" class="w-full scale-[1.1]">
      </div>
      <div class="absolute left-16 top-17 h-4 w-4 flex items-center justify-center border-(1 slate-600 rd-[50%] solid) bg-sys-layer-d text-2.5 text-sys-text-body">
        {{ userInfo?.vip_level?.level }}
      </div>
      <div class="w-100%">
        <div class="mb-2 flex-between">
          <span class="base-title">{{ $t('eZI2IxwElpAdavEeDLh') }}: {{ userInfo?.vip_level?.name }}</span>
          <a class="url-yellow-underline text-right" @click="globalPopups.rankPopup.open()">
            {{ $t('psnn1jkM5VsxbQ7ml7Sd') }}
          </a>
        </div>
        <div class="w-full">
          <AProgress status="normal" class="ant-cover_progress" :percent="Number(percentage)" trailColor="#3E404C" strokeColor="#EAB308" :size="[100, 14]" />
        </div>
      </div>
    </TCard>
    <TCard class="rank l" bodyClass="flex items-center gap-4">
      <img src="../../../assets/imgs/user/cash.png" class="h-14.5 w-14.5">
      <div class="w-100%">
        <span class="base-title"> {{ $t('xdVw8wTyftkGzOKfaLy9') }}</span>
        <br>
        <div class="flex-center justify-start text-2xl">
          <span class="text-yellow-500">{{ bignumber(userInfo?.vip_level?.cashback_rate ?? 0).multipliedBy(100) }}%</span>
          <i class="i-local:transition mx-2 text-4xl" />
          <span class="text-sys-text-body">{{ bignumber(userInfo?.next_level?.cashback_rate ?? 0).multipliedBy(100) }}%</span>
        </div>
      </div>
    </TCard>

    <MyEmail class="email" titleClass="text-xl" />
    <Password class="password" titleClass="text-xl" />
    <Auth2FA class="authenticator" titleClass="text-xl" />

    <TCard class="setting col-span-3" bodyClass="h-full">
      <Settings />
    </TCard>
  </div>
</template>

<style scoped lang="scss">
@media (min-width: 1025px) and (max-width: 2000px) {
  .account {
    --uno: 'grid-cols-2 grid-rows-[minmax(101px,1fr)_minmax(101px,1fr)_205px_205px_minmax(330px,auto)]';
    .email,
    .password {
      --uno: 'row-start-3';
    }
    .authenticator {
      --uno: 'row-start-4';
    }
    .setting {
      --uno: 'row-start-5 col-span-2';
    }
    &.query {
      grid-template-rows: repeat(3, minmax(101px, auto)) 1fr repeat(3, minmax(205px, auto));
      --uno: 'grid-cols-1';
      .email,
      .password {
        --uno: 'row-start-auto';
      }
      .authenticator {
        --uno: 'row-start-auto';
      }
      .setting {
        --uno: 'row-start-4 col-span-1';
      }
    }
  }
}
@media bp-lt-tabletl {
  .account {
    grid-template-rows: repeat(3, minmax(101px, auto)) 1fr repeat(3, auto);
  }
  .user,
  .grade,
  .rank,
  .email,
  .password,
  .authenticator {
    --uno: 'col-span-2';
  }
  .setting {
    --uno: 'row-start-4 col-span-2';
  }
}
</style>

<style>
.ant-progress.ant-progress-line.ant-cover_progress {
  position: relative;
  .ant-progress-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
  }
  .ant-progress-outer {
    padding-right: 0 !important;
  }
}
</style>
